<template>
  <div class="gather-table">
    <div class="table_one">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        row-id="id"
        size="medium"
        resizable
        :loading="loading"
        :data="tableOne"
        :header-cell-class-name="table_col"
        highlight-hover-row
        max-height="100%"
        ref="vxeTable"
        v-if="tableOne.length > 0">
        <vxe-column
          field="orgName"
          title="部门"
          align="center"
          v-if="!$buttonAuth.hasPer(buttonList, 'PC_ABSENTEEISM_ADD')"></vxe-column>
        <vxe-column field="userName" title="姓名" align="center"></vxe-column>
        <vxe-column field="startTime" title="旷工开始时间" align="center"></vxe-column>
        <vxe-column field="endTime" title="旷工结束时间" align="center"></vxe-column>
        <vxe-column field="days" title="旷工天数(天)" align="center" key="startTime"></vxe-column>
        <vxe-column field="hours" title="旷工时长(h)" align="center" key="endTime"></vxe-column>

        <vxe-column
          title="操作"
          align="center"
          v-if="$buttonAuth.hasPer(buttonList, 'PC_ABSENTEEISM_ADD')"
          fixed="right">
          <template #default="{ row }">
            <span class="operate" @click.stop="edit(row)">编辑</span>
            <span class="operate" @click.stop="del(row)">删除</span>
          </template>
        </vxe-column>
      </vxe-table>
      <div class="no_data" v-else>
        <empty></empty>
      </div>
      <el-pagination
        background
        :current-page="tablePage.currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="tablePage.pageSize"
        :total="tablePage.total"
        @current-change="handleSizeChange"
        hide-on-single-page
        layout="pager,total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getNeglectList, delNeglectRecord, getNeglectRecordDetail } from '@apis/api-attendance.js'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  components: {},
  props: {
    buttonList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      param2: {
        year: '',
        month: '',
        userId: '',
        orgId: '',
      },
      tableOne: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      moment: moment,
      loading: false,
      activeInfo: {
        id: '',
        formId: '',
        processInstanceId: '',
      },
      activeRow: {},
    }
  },
  created() {},
  mounted() {},
  methods: {
    getData(year, month, orgId, userId) {
      this.param2 = {
        orgId: orgId,
        userId: userId,
        year: String(year),
        month: String(month),
      }
      this.tablePage.currentPage = 1
      this.getOrgTable()
    },
    // 获取部门列表
    getOrgTable() {
      this.loading = true
      getNeglectList({
        pageSize: this.tablePage.pageSize,
        currentPage: this.tablePage.currentPage,
        param: {
          ...this.param2,
        },
      }).then(res => {
        if (res.status === 200) {
          this.loading = false
          this.tableOne = res.data.content
          this.tablePage.total = res.data.totalSize
        }
      })
    },

    handleSizeChange(e) {
      if (e.type === 'size' && this.tablePage.pageSize !== e.pageSize) {
        this.tablePage.currentPage = 1
      }
      this.tablePage.currentPage = e.currentPage
      this.tablePage.pageSize = e.pageSize
      this.getOrgTable()
    },
    /* 头部样式 */
    table_col({ row, column, rowIndex, columnIndex }) {
      return 'table_col'
    },
    edit(row) {
      getNeglectRecordDetail({
        id: row.id,
      }).then(res => {
        this.$emit('edit', res.data)
      })
    },
    del(row) {
      this.$confirm('确定要删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          delNeglectRecord({
            id: row.id,
          }).then(res => {
            if (res.status === 200) {
              this.$message.success('删除成功')
              this.getOrgTable()
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.gather-table {
  height: 100%;
  .table_one {
    padding: 0 10px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
    .page-r {
      text-align: right;
    }
    .mytable-scrollbar {
      height: calc(100% - 50px);
      /deep/.vxe-table--render-wrapper {
        height: 100%;
        .vxe-table--main-wrapper {
          height: 100%;
          display: flex;
          flex-direction: column;
          .vxe-table--body-wrapper {
            flex: 1;
          }
        }
      }
      .detail_box {
        // position: relative;
        .word_tip {
          position: absolute;
          right: 5px;
          bottom: 0;
          color: #999;
        }
      }
      .subscript {
        position: absolute;
        right: 0;
        top: 0;
        border-top: 30px solid #f54040;
        border-left: 35px solid transparent;
      }
      .subscript_word {
        position: absolute;
        right: 3.5px;
        top: -1px;
        color: #ffffff;
        font-size: 12px;
      }
    }
    .operate {
      color: #004db6;
      cursor: pointer;
      margin: 0 10px;
    }
  }
}
/deep/.upload_box {
  align-items: center;
  .file_tips {
    margin-left: 10px;
  }
}
/deep/.sunmit_tips {
  text-align: center;
  .el-button--mini,
  .el-button--small {
    font-size: 16px;
  }
}
</style>
